<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>九宫格</title>
	<style type="text/css">
	/* 固定宽度 */
	.container1 {
		display: flex;
		width: 300px;
		flex-wrap: wrap;
		border-left: 1px solid #DDD;
		border-top: 1px solid #DDD;
	}
	.container1 > div {
		width: 100px;
		height: 100px;
		box-sizing: border-box;
		border-right:  1px solid #DDD;
		border-bottom:  1px solid #DDD;
	}
	/* 不固定宽度 */
	.container2 {
		display: flex;
		flex-wrap: wrap;
		border-left: 1px solid #DDD;
		border-top: 1px solid #DDD;
	}
	.container2 > div {
		width: 33.3%;
		height: 100px;
		box-sizing: border-box;
		border-right:  1px solid #DDD;
		border-bottom:  1px solid #DDD;
	}
	</style>
</head>
<body>
	<!-- 固定宽度 -->
	<div class="container1">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
	<!-- 不固定宽度 -->
	<div class="container2">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
</body>
</html>